<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" th:src="@{/js/require.js}"></script>
    <script type="text/javascript" th:src="@{/js/requireConfig.js}"></script>
    <link rel="stylesheet" th:href="@{/css/sa.css}">
    <script type="text/javascript" th:src="@{/js/app/Shop/EditShop.js}"></script>
</head>
<body>
<div class="vue-box" style="display: block;">
    <div class="c-panel">
        <form class="layui-form" action="">
            <div class="c-panel">
                <div class="c-title">基本信息</div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品名称<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" v-model="that.name" required lay-verify="required"
                                   placeholder="请输入" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <label class="layui-form-label">商品标签<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="icon" v-model="that.icon" required lay-verify="required"
                                       placeholder="请输入标签，英文逗号隔开" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">

                        <label class="layui-form-label">商品说明<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="spack" v-model="that.spack" required lay-verify="required"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <label class="layui-form-label">建议零售价<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="number" name="makePrice" v-model="that.makePrice" required
                                       lay-verify="required"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">

                        <label class="layui-form-label">单位<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="unit" v-model="that.unit" required lay-verify="required"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <label class="layui-form-label">小分类<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="brand" v-model="that.brand" required lay-verify="required"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">

                        <label class="layui-form-label">产地<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="place" v-model="that.place" required lay-verify="required"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <label class="layui-form-label">类型<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="type" v-model="that.type" required lay-verify="required"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品分类<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="shopClass.name" @focus="fl($event)" v-model="that.shopClass.name" required lay-verify="required"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <label class="layui-form-label">商品活动</label>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                                <input type="text" name="shopActivity.name" @focus="hd($event)" v-model="that.shopActivity.name"
                                       placeholder="请输入" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">是否首页<i class="icon-re">*</i></label>
                        <div class="layui-input-inline">
                            <input type="radio" name="isIndex" value="0" title="开" :checked="that.isIndex==0?true:false">
                            <input type="radio" name="isIndex" value="1" title="关" :checked="that.isIndex==1?true:false">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品轮播<i class="icon-re">*</i></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="upload">
                                上传图片
                            </button>
                        </div>
                        <div class="layui-input-inline" v-for="(item,i) in that.image">
                            <img v-bind:src="item" style="width: 100px;margin: 0 auto">
                            <br>
                            <br>
                            <a @click="delNote(i)" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                                删除
                            </a>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图文详情<i class="icon-re">*</i></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="uploadX">
                                上传图片
                            </button>
                        </div>
                        <div class="layui-input-inline" v-for="(item,i) in that.note">
                            <img v-bind:src="item" style="width: 100px;margin: 0 auto">
                            <br>
                            <br>
                            <a @click="delNoteX(i)" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                                删除
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-panel">
                <div class="c-title">商品规格&nbsp;<a class="layui-btn layui-btn-radius layui-btn-normal" @click="add()">新增规格</a> </div>
                <table class="layui-table" id="guige">
                    <tr>
                        <td>规格名称</td>
                        <td>价格</td>
                        <td>成本</td>
                        <td>起订数量</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="(item,i) in spec">
                        <td><input type="text" name="name" v-model="specList[i].name" required lay-verify="required"
                                   placeholder="请输入" autocomplete="off"
                                   class="layui-input"></td>
                        <td><input type="number" name="price" v-model="specList[i].price" required lay-verify="required"
                                   placeholder="请输入" autocomplete="off"
                                   class="layui-input"></td>
                        <td><input type="number" name="cost" v-model="specList[i].cost" required lay-verify="required"
                                   placeholder="请输入" autocomplete="off"
                                   class="layui-input"></td>
                        <td><input type="number" name="buyCount" v-model="specList[i].buyCount" required lay-verify="required"
                                   placeholder="请输入" autocomplete="off"
                                   class="layui-input"></td>
                        <td>
                            <a class="layui-btn layui-btn-radius layui-btn-danger" @click="delG(i)">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>